<template>
  <view>
    <movable-area class="cartNumView" v-if="cart.cartNum > 0">
      <movable-view class="cartNum"
                    :x="340"
                    :y="500"
                    @tap="$xyfun.to('/pages/cart');" scale="true" out-of-bounds="true" direction="all">
        <view class="yz-iconfont yz-gouwuche"></view>
        <view class="number">{{ cart.cartNum }}</view>
      </movable-view>
    </movable-area>
  </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: "cartNumView",
  data() {
    return {};
  },
  props: {

  },
  computed: {
    ...mapState(['common','user','cart'])
  },
}
</script>

<style lang="scss">
.cartNumView{
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  .cartNum{
    pointer-events: auto;
    background: $theme3;
    color: #fff;
    z-index: 999;
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    font-size: 36rpx;
    box-shadow: 0 0 8rpx rgba(255, 255, 255, 0.78);
    .number{
      position: absolute;
      right: -9rpx;
      top: -22rpx;
      color: #fff;
      background: $theme2;
      width: 30rpx;
      height: 30rpx;
      border-radius: 50%;
      text-align: center;
      line-height: 30rpx;
      font-size: 24rpx;
    }
  }
}
</style>
